<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Gentelella Alela! | </title>

    <!-- Bootstrap -->
    <link href="/resa/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="/resa/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="/resa/vendors/nprogress/nprogress.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="/resa/build/css/custom.min.css" rel="stylesheet">
    
    <style>
     		::-webkit-scrollbar {/*滚动条*/
		    width:5px;
		}
		::-webkit-scrollbar-track {/*滚动槽*/
		    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
		    border-radius:10px;
		}
		::-webkit-scrollbar-thumb {/*滚动条滑块*/
		    border-radius:10px;
		    background:rgba(0,0,0,0.1);
		    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
		}	
    body{
    	overflow-x: hidden;
    	font-size: 13px;
    }
    td{
    		height: 55px;
    		line-height: 38px;
    		border: 1px solid #DCDCDC!important;
    }
    thead td{
    	background: #F2F2F2;
    }
    	.lines{
    		    line-height: 27px;
    		    border-left: 2px solid #1FD6BB;
    	}
    	.tables{
    		    width: 100%;
				    max-width: 100%;
				    margin-bottom: 20px;
				    /*text-align: center;*/
    	}
    	.tables thead{
    		text-align: center;
    	}
    	.tables tbody td{
    		padding-left: 10%;
    	}
    	.table-bordereds{
    		border: 1px solid #ddd
    	}
    	.mar{
    		    margin-top: 25px;
    	}
    	.yanfa{
    		color: #1FD6BB;
    	}
    	.task{
    		color: #64BF62;
    	}
    	.quexian{
    		color:#F95A55
    	}
    	/*已完成*/
    	.successed{
    		color: #00c292;
    	}
    	/*进行中*/
    	.loading{
    		color: #FEA31D;
    	}
    	/*未开始*/
    	.notbegin{
    		color: #F95A55;
    	}



			.ing i{
				color: #FEA31D;
			}


			.error i{
				color: #F95A55;
			}
    </style>
  </head>

  <body class="nav-md" style="background: #F0F0F0">
       		<span style="display: none" id="pid" th:text="${pid}"></span>

            <div class="clearfix"></div>

            <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <div class="row">
                    	<div class="col-md-3 lines">任务类型分布</div>
		                    <ul class="nav navbar-right panel_toolbox">
		                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
		                      </li>
		                      <li><a class="close-link"><i class="fa fa-close"></i></a>
		                      </li>
		                    </ul>
                    </div>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <div class="row">
                    	<div class="col-md-6 mar" >
                    			
                    			       <table class="tables table-bordereds">
							                      <thead>
							                        <tr>
							                          <td>任务类型</td>
							                          <td>数量</td>
							                          <td>占比</td>
							                        </tr>
							                      </thead>
							                      <tbody>
							                        <tr th:each="info,infoStat :${projectTypeList}">
							                          <td th:utext="${info.tType.icon}+${info.tType.tName}"><i class="fa fa-inbox yanfa">&nbsp;</i>研发需求</td>
							                          <td th:text="${info.count}">1</td>
							                          <td th:text="${info.sum}">25%</td>
							                        </tr>
							                        <!--<tr>-->
							                          <!--<td><i class="fa fa-check-square task">&nbsp;</i>研发任务</td>-->
							                          <!--<td>1</td>-->
							                          <!--<td>25%</td>-->
							                        <!--</tr>-->
							                        <!--<tr>-->
							                          <!--<td><i class="fa fa-chain-broken quexian">&nbsp;</i>缺陷</td>-->
							                          <!--<td>2</td>-->
							                          <!--<td>50%</td>-->
							                        <!--</tr>-->
							                      </tbody>
							                    </table>

                    		
                    		
                    	</div>
                    	<div class="col-md-5 ">
                    		
                    			  <!-- pie chart -->
									                <div id="item" style="height:250px;width: 400px;"></div>
              <!-- /Pie chart -->
                    		
                    	</div>
                    </div>
                  
                  </div>
                </div>
              </div>
            </div>
        <!-- /page content -->

				
            <div class="clearfix"></div>

            <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                     <div class="row">
                    	<div class="col-md-3 lines">状态类型分布</div>
		                    <ul class="nav navbar-right panel_toolbox">
		                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
		                      </li>
		                      <li><a class="close-link"><i class="fa fa-close"></i></a>
		                      </li>
		                    </ul>
                    </div>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <div class="row">
                    	<div class="col-md-6 mar" >
                    			
                    			       <table class="tables table-bordereds">
							                      <thead>
							                        <tr>
							                          <td>状态类型</td>
							                          <td>数量</td>
							                          <td>占比</td>
							                        </tr>
							                      </thead>
							                      <tbody>
							                        <tr th:each="info,infoStat :${projectStatusList}">
							                          <td th:utext="${info.icon}"><i class="fa fa-power-off notbegin">&nbsp;</i>未开始</td>
							                          <td th:text="${info.count}">1</td>
							                          <td th:text="${info.sum}">14.29%</td>
							                        </tr>
							                        <!--<tr>-->
							                          <!--<td><i class="fa fa-pie-chart loading">&nbsp;</i>进行中</td>-->
							                          <!--<td>5</td>-->
							                          <!--<td>71.43%</td>-->
							                        <!--</tr>-->
							                        <!--<tr>-->
							                          <!--<td><i class="fa fa-check-circle successed">&nbsp;</i>已完成</td>-->
							                          <!--<td>1</td>-->
							                          <!--<td>14.29%</td>-->
							                        <!--</tr>-->
							                      </tbody>
							                    </table>

                    		
                    		
                    	</div>
                    	<div class="col-md-5 ">
                    		
                    			  <!-- pie chart -->
									                <div id="item2" style="height:250px;width: 400px;"></div>
              <!-- /Pie chart -->
                    		
                    	</div>
                    </div>
                  
                  </div>
                </div>
              </div>
            </div>
        <!-- /page content -->
        
        
            <div class="clearfix"></div>

            <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <div class="row">
                    	<div class="col-md-3 lines">任务类型分布</div>
		                    <ul class="nav navbar-right panel_toolbox">
		                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
		                      </li>
		                      <li><a class="close-link"><i class="fa fa-close"></i></a>
		                      </li>
		                    </ul>
                    </div>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                        <div class="row">
                    	<div class="col-md-12 mar" >
                    			
                    			       <table class="tables table-bordereds">
							                      <thead>
							                        <tr>
							                          <td>状态类型</td>
							                          <td>未开始</td>
							                          <td>进行中</td>
							                          <td>已完成</td>
							                        </tr>
							                      </thead>
							                      <tbody>
							                        <tr th:each="info,infoStat :${projectCountList}">
							                          <td th:utext="${info.icon}+${info.tName}"><i class="fa fa-inbox yanfa">&nbsp;</i>研发需求</td>
							                          <td th:text="${info.data.count1}">0</td>
							                          <td th:text="${info.data.count2}">1</td>
							                          <td th:text="${info.data.count3}">0</td>
							                        </tr>
							                        <!--<tr>-->
							                          <!--<td><i class="fa fa-check-square task">&nbsp;</i>研发任务</td>-->
							                          <!--<td>1</td>-->
							                          <!--<td>0</td>-->
							                          <!--<td>1</td>-->
							                        <!--</tr>-->
							                        <!--<tr>-->
							                          <!--<td><i class="fa fa-chain-broken quexian">&nbsp;</i>缺陷</td>-->
							                          <!--<td>0</td>-->
							                          <!--<td>0</td>-->
							                          <!--<td>0</td>-->
							                        <!--</tr>-->
							                      </tbody>
							                    </table>
				                    	</div>
				                    </div>
                  	
                  </div>
                </div>
              </div>
            </div>
        <!-- /page content -->
    <!-- jQuery -->
    <script src="/resa/vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="/resa/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="/resa/vendors/fastclick/lib/fastclick.js"></script>
    <!-- NProgress -->
    <script src="/resa/vendors/nprogress/nprogress.js"></script>
    
     <!-- ECharts -->
    <script src="/resa/vendors/echarts/dist/echarts.min.js"></script>
    <!-- Custom Theme Scripts -->
    <script src="/resa/build/js/custom.min.js"></script>
    
    <script>
    
    $(function(){
    		$.ajax({
				url:'/resa/project/task/biaobiaoDate/'+$("#pid").text()+'.do',
				type:'post',
				dateType:'json',
				success:function(result){
					itemone(result.tu1)

					itemtwo(result.tu2)
				},error:function(){
				},error:function(){
					alert("请求错误")
				}
			})



    })
    
    function itemone(result){
    	   				var dom = document.getElementById("item");
								var myChart = echarts.init(dom);
								var app = {};
								option = null;
								app.title = '环形图';
								
								option = {
										toolbox: {
								        show : true,
								        orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
								                                   // 'horizontal' ¦ 'vertical'
								        x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
								                                   // 'center' ¦ 'left' ¦ 'right'
								                                   // ¦ {number}（x坐标，单位px）
								        y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
								                                   // 'top' ¦ 'bottom' ¦ 'center'
								                                   // ¦ {number}（y坐标，单位px）
								        backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
								        borderColor: '#ccc',       // 工具箱边框颜色
								        borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
								        padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，
								        showTitle: true,
								        feature : {
								            
								            saveAsImage : {
								                show : true,
								                title : '保存为图片',
								                type : 'jpeg',
								                lang : ['点击本地保存'] 
								            }
								           
								        }
								    },
								    tooltip: {
								        trigger: 'item',
								        formatter: "{a} <br/>{b}: {c} ({d}%)"
								    },
								    legend: {
								    		
								        orient: 'vertical',
								        x: 'right',
								        y: 'center',
								        // data:['研发任务','研发需求','缺陷']
										data:result.legend
								    },
								    color:result.color,
								    // color:['#78D375','#1FD6BB','#F95A55'],
								    series: [
								        {
								            type:'pie',
								            radius: ['50%', '60%'],
								            avoidLabelOverlap: false,
								            label: {
								                normal: {
								                    show: false,
								                    position: 'center'
								                },
								                emphasis: {
								//                  show: true,
								                    textStyle: {
								                        fontSize: '30',
								                        fontWeight: 'bold'
								                    }
								                }
								            },
								            labelLine: {
								                normal: {
								                    show: true
								                }
								            },
								            // data:[
								            //     {value:1, name:'研发任务'},
								            //     {value:2, name:'研发需求'},
								            //     {value:1, name:'缺陷'}
								            //
								            // ]
											data:result.series
								            
								        }
								    ]
								};
								if (option && typeof option === "object") {
								    myChart.setOption(option, true);
								}
    }




function itemtwo(result){
    	   				var dom = document.getElementById("item2");
								var myChart = echarts.init(dom);
								var app = {};
								option = null;
								app.title = '环形图';
								
								option = {
										toolbox: {
								        show : true,
								        orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
								                                   // 'horizontal' ¦ 'vertical'
								        x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
								                                   // 'center' ¦ 'left' ¦ 'right'
								                                   // ¦ {number}（x坐标，单位px）
								        y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
								                                   // 'top' ¦ 'bottom' ¦ 'center'
								                                   // ¦ {number}（y坐标，单位px）
								        backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
								        borderColor: '#ccc',       // 工具箱边框颜色
								        borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
								        padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，
								        showTitle: true,
								        feature : {
								            
								            saveAsImage : {
								                show : true,
								                title : '保存为图片',
								                type : 'jpeg',
								                lang : ['点击本地保存'] 
								            }
								           
								        }
								    },
								    tooltip: {
								        trigger: 'item',
								        formatter: "{a} <br/>{b}: {c} ({d}%)"
								    },
								    legend: {
								    		
								        orient: 'vertical',
								        x: 'right',
								        y: 'center',
								        // data:['未开始','已完成','进行中']
								        data:result.legend
								    },
								    color:result.color,
								    // color:['#F95A55','#1FD6BB','#FEA31D'],
								    series: [
								        {
								            type:'pie',
								            radius: ['50%', '60%'],
								            avoidLabelOverlap: false,
								            label: {
								                normal: {
								                    show: false,
								                    position: 'center'
								                },
								                emphasis: {
								//                  show: true,
								                    textStyle: {
								                        fontSize: '30',
								                        fontWeight: 'bold'
								                    }
								                }
								            },
								            labelLine: {
								                normal: {
								                    show: true
								                }
								            },
								            // data:[
								            //     {value:1, name:'未开始'},
								            //     {value:1, name:'已完成'},
								            //     {value:5, name:'进行中'}
								            //
								            // ]
								            data:result.series
								        }
								    ]
								};
								if (option && typeof option === "object") {
								    myChart.setOption(option, true);
								}
    }
    	
    </script>
  </body>
</html>
